<template>
  <el-card class="card-box">
    <template #header>
        <div class="card-header">
          <span>客流属性分析</span>
        </div>
    </template>

    <div class="text-item">
      <div class="chart-wrap">
        <div ref="chartRefSex" class="chart-content" v-show="isShowSexChart"></div>
        <el-empty description="暂无数据" v-show="!isShowSexChart" :image-size="100"/>
      </div>

      <div class="chart-wrap">
        <div ref="chartRefAge" class="chart-content" v-show="isShowAgeChart"></div>
        <el-empty description="暂无数据" v-show="!isShowAgeChart" :image-size="100"/>
      </div>
    </div>
  </el-card>
</template>

<script setup>
  import * as echarts from 'echarts';
  import {getSexRadioOption,getAgeGroupOption } from '../../echartOption'
  const props = defineProps({
    statisticData2:{
      type:Object,
      default:()=>{}
    },
    statisticData3:{
      type:Object,
      default:()=>{}
    }
  })
  let isShowSexChart = ref(false);
  let isShowAgeChart = ref(false);
  let chatDataSex = reactive({});
  let chatDataAge = reactive({});
  const echartsInstanceSex = shallowRef(null);
  const echartsInstanceAge = shallowRef(null);
  const chartRefSex = shallowRef();
  const chartRefAge = shallowRef();
    const initChartSex = ()=>{
      const chatPieData = [
        {
          name:"男性",
          value:chatDataSex?.menNum
        },
        {
          name:"女性",
          value:chatDataSex?.womenNum
        }
      ]
      echartsInstanceSex.value = null;
      echartsInstanceSex.value = echarts.init(chartRefSex.value, null, {renderer:'svg'})
      const option = getSexRadioOption(chatPieData,false)
      echartsInstanceSex.value.setOption(option,true)
      window.addEventListener('resize', resize)
    }

    const initChartAge = ()=>{
      const chatPieData = [
        {
          name:"29岁及以下",
          value:chatDataAge?.before29Num
        },
        {
          name:"29-59岁",
          value:chatDataAge?.before59Num
        },
        {
          name:"60岁及以上",
          value:chatDataAge?.after60Num
        }
      ]
      echartsInstanceAge.value = null;
      echartsInstanceAge.value = echarts.init(chartRefAge.value, null, {renderer:'svg'})
      const option = getAgeGroupOption(chatPieData,false)
      echartsInstanceAge.value.setOption(option,true)
      window.onresize = ()=> {
        resize();
      };
    }

    onUnmounted(() => {
      // 组件卸载时销毁图表实例
      if(echartsInstanceSex.value){
        echartsInstanceSex.value.dispose();
      }
      if(echartsInstanceAge.value){
        echartsInstanceAge.value.dispose();
      }
    });

    const resize = () =>{
      if(echartsInstanceAge.value){
        echartsInstanceAge.value?.resize()
      }
      if(echartsInstanceSex.value){
        echartsInstanceSex.value?.resize()
      }
    };

    watch(() => props.statisticData2,(newValue)=>{
      if(newValue?.menNum || newValue?.womenNum){
        chatDataSex = newValue;
        isShowSexChart.value = true;
        nextTick(() => {
          initChartSex();
          resize()
        })
      }
      else{
        chatDataSex = {};
        isShowSexChart.value = false;
      }
    },
    {
      deep: true,
      immediate: true
    })

    watch(() => props.statisticData3,(newValue)=>{
      if(newValue?.before29Num || newValue?.before59Num || newValue?.after60Num){
        chatDataAge = newValue;
        isShowAgeChart.value = true;
        nextTick(() => {
          initChartAge()
          resize()
        })
      }
      else{
        chatDataAge = {};
        isShowAgeChart.value = false;
      }
    },
    {
      deep: true,
      immediate: true
    })
</script>
<style lang="scss" scoped>
  .card-box{
    width: 66.5%;
    :deep(.el-card__body){
      height: 300px;
      .text-item{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        .chart-wrap{
          width: 50%;
          height: 100%;
          .chart-content{
            width: 100%;
            height: 100%;
          }
          .el-empty{
            height: 100%;
          }
        }
      }
    }
  }
</style>
